<template>
  <nav>
    <div class="guanzhu">
      <img src="../../../assets/img/yl-img/hy-02.jpg" class="gz1" />
      
      <h6>

<!-- 登陆前展示 -->
        <div v-show="show">
        <router-link to="/Login"><p>VIP请登录</p></router-link>
        <span>您的会员已过期</span>
        </div>

<!-- 登录后展示 -->
        <div class="c8" v-show="!show">
        <p>用户:{{ username }}</p>
        <span>您的会员将于2030年到期</span>
        </div>

        </h6>
        
        <img src="../../../assets/img/yl-img/hy-03.jpg" class="gz2" />
      <!-- <p class="kaitong" >购买</p>@click="goReg -->
      <input type="button" value="购买" @click="goReg" class="kaitong">
    </div>

    <div class="box">
      <ul class="fl">
        <li>
          <p>年卡5折</p>
          <span>0.3元/天</span>
        </li>
        <li>
          <p>领福利</p>
          <span>会员免费领</span>
        </li>
        <li>
          <p>今日任务</p>
          <span>赚U豆转会员</span>
        </li>
        <li>
          <p>联合会员</p>
          <span>超值！折上折</span>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  name: "MyNav",
 data() {
    return {
      show: true,
      username:""
      // cont: {},
    };
  },
  
  mounted() {
      let list = localStorage.getItem("username");
      this.username = list;
      
      if (list) {
        this.show = false;
      } else {
        this.show = true;
      }
  },
  methods:{
    goReg(){
      // this.$router.push("/Register");
      this.$router.push({path:"/Kaitong"});
      // this.$router.replace("/Register");
    }
  }
  
};
</script>

<style scoped>


nav {
  width: 100%;
  /* height: 1.67rem; */
  background-color: #1a1b1f;
}
.guanzhu {
  width: 3.84rem;
  height: 0.8rem;
  margin: auto;
  background-image: linear-gradient(to bottom right, #252a50, #242831);
	border-radius:0.1rem;
}

.guanzhu h6 p{
	font-size: 0.16rem;
  color: white;
}
.guanzhu h6 span{
	font-weight: normal;
	font-size: 0.12rem;
  color: #696c7c;
}
.gz1{
	width: 0.47rem;
	height: 0.47rem;
	border-radius:50% ;
	float: left;
	margin-left: 0.18rem;
	margin-top: 0.18rem;
  margin-bottom: 0.25rem;
}
.gz2{
  width: 0.31rem;
  height: 0.18rem;
  margin-top: 0.18rem;
  float: left;
}
.guanzhu h6{
	margin-top: 0.18rem;
  margin-left: 0.16rem;
	float: left;
	margin-bottom: 0.25rem;
	
}
.kaitong{
	float: right;
	width: 0.76rem;
	height: 0.33rem;
	background-color: #ffdfa6;
	color: #5e4039;
	margin-right: 0.15rem;
	margin-top: 0.23rem;
	line-height: 0.33rem;
	text-align: center;
	border-radius: 0.4rem;
  border: 0;
}

.fl{
  width: 3.99rem;
  margin-left: 0.15rem;
  display: flex;
  align-items: center;
  overflow: auto;
}
.fl::-webkit-scrollbar {
	display: none;
}
.fl li{
  width: 1.24rem;
  height: 0.72rem;
	border-radius:0.1rem;
  background-image: linear-gradient(#252432, #24264c);
  color: #ddd2a3;
  margin-right: 0.06rem;
   flex-shrink: 0;
}
.fl li p{
  font-size: 0.13rem;
  margin-top: 0.18rem;
}
.fl li p,.fl li span{
  margin-left: 0.13rem;
}
.fl li span{
  color: #666e7a;
  font-size: 0.1rem;
  margin-bottom: 0.18rem;
}




/* .goumai {
  width: 3.84rem;
  height: 0.82rem;
} */

/* .box ul {
  height: 50%;
  /* border:1px solid red; */
  /* display: flex; */
  /* align-items: center; */
/* } */ 

/* .box ul li {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: pink;
  border-radius: 50%;
  margin-left: 10px;
} */
</style>